<template>
	<view class="page">
		<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
			<el-tab-pane label="复购配置" name="first">
				<view class="formview">
					<vk-data-form ref="form1" v-model="form1.data" :action="form1.props.action"
						:columns="form1.props.columns" :rules="form1.props.rules" :form-type="form1.props.formType"
						:loading.sync="form1.props.loading" :auto-close="true" :show-cancel="false" submit-text="提交修改"
						@success="onFormSuccess">
					</vk-data-form>
				</view>
				<el-divider></el-divider>
				<el-divider></el-divider>
				演示图例：
				<view style="display: flex;flex-wrap: nowrap;">
					<image src="/static/演示.png" mode="aspectFit"></image>
					<!-- <image src="https://duanju-1257028257.cos.ap-guangzhou.myqcloud.com/houtai/yanshi/IMG_5860.PNG"
						mode="aspectFit"></image> -->
				</view>
			</el-tab-pane>

			<!-- <el-tab-pane label="选项卡3" name="third">
				备用选项卡3
			</el-tab-pane>

			<el-tab-pane label="选项卡4" name="fourth">
				备用选项卡4
			</el-tab-pane> -->

		</el-tabs>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	const db = uniCloud.database();

	export default {
		data() {
			return {
				activeName: 'first',
				// 表单相关开始-----------------------------------------------------------
				form1: {
					// 表单请求数据，此处可以设置默认值
					data: {
						repurchaseState: false,
						tips: 0,
					},
					// 表单属性
					props: {
						// 表单请求地址
						action: "admin/dls/kh/repurchase/update",
						// 表单字段显示规则
						columns: [{
								"key": "repurchaseState",
								"title": "复购活动开关",
								"labelWidth": 110,
								"width": 300,
								"type": "switch"
							}, {
								"key": "interval",
								"title": "每多少集弹窗",
								"labelWidth": 110,
								"width": 200,
								"type": "number"
							},
							{
								key: "repurchaseData",
								type: "array<object>",
								itemWidth: 260,
								showAdd: true,
								showClear: true,
								showSort: true,
								// 新增一行时,该行的默认值
								defaultValue: {
									tehui: false,
									bean: 0,
									subject: ''
								},
								rightBtns: ['copy', 'delete'],
								// 每行每个字段对应的渲染规则
								columns: [{
										key: "",
										title: "复购方案类型",
										type: "group",
										width: 400,
										columns: [{
												"key": "type",
												"title": "方案类型",
												"type": "select",
												labelWidth: 70,
												minwidth: 150,
												"data": [{
														value: 1,
														label: "小时会员"
													},
													{
														value: 2,
														label: "天会员"
													},
													{
														value: 3,
														label: "金豆"
													},
												],

											},
											{
												key: "days",
												title: "会员天数",
												labelWidth: 80,
												width: 80,
												"showRule": "type == 2",
												type: "number",

											},
											{
												key: "hour",
												title: "时会员数",
												labelWidth: 80,
												width: 80,
												"showRule": "type == 1",
												type: "number",

											},
											{
												key: "bean",
												title: "金豆数量",
												width: 80,
												labelWidth: 80,
												"showRule": "type == 3",
												type: "number",

											},

										],
									},
									{
										key: "recharge_text",
										title: "方案描述",
										type: "text",
										isUnique: true,
										rules: [{
												required: true,
												message: "该项不能为空",
												trigger: ["change", "blur"]
											},
											// {
											// 	min: 3,
											// 	max: 5,
											// 	message: '长度在 3 到 5 个字符',
											// 	trigger: ["change", "blur"]
											// }
										]
									},
									{
										key: "recharge_amount",
										title: "支付金额",
										type: "money",
										width: 170,
										rules: [
											//限制只能添加一次
											{
												required: true,
												message: "该项不能为空",
												trigger: ["change", "blur"]
											}
										]
									},
									{
										key: "tehui",
										title: "是否特惠",
										type: "switch",
										width: 80,
										defaultValue: false
									},
									{
										key: "original",
										title: "原价金额",
										type: "money",
										width: 170,
										rules: [
											//限制只能添加一次
											{
												required: true,
												message: "该项不能为空",
												trigger: ["change", "blur"]
											}
										]
									}


								]
							},
						],
						// 表单验证规则
						rules: {
							repurchaseState: [{
								required: true,
								message: "复购活动开关不能为空",
								trigger: "change"
							}],
							interval: [{
								required: true,
								message: "复购弹窗集数不能为空",
								trigger: "change"
							}],
							recharge_amount: [{
								required: true,
								message: "支付金额不能为空",
								trigger: "change"
							}],
							// bean: [{
							// 	required: true,
							// 	message: "金豆数量不能为空",
							// 	trigger: "change"
							// }],
							recharge_text: [{
								required: true,
								message: "充值说明不能为空",
								trigger: "change"
							}]
						},
						// add 代表添加 update 代表修改
						formType: "update",
						// 表单是否在请求中
						loading: false,
						// 是否显示表单1 的弹窗
						show: false
					}
				},
				// 表单相关结束-----------------------------------------------------------
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
		},
		async onShow() {
			// if (vk.vuex.get('$user.userInfo.role[0]') != "admin") {
			// 	vk.navigateToLogin();
			// }
			this.loadData()
		},
		onReady() {

		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			async loadData() {
				vk.callFunction({
					url: 'admin/dls/kh/repurchase/getList',
					data: {},
					success: (data) => {
						console.log("1222222222222222", data);
						if (data.rows[0]) {
							this.form1.data = data.rows[0];
						}

					}
				});
			},
			onFormSuccess() {
				this.loadData()
			}
		}
	};
</script>

<style>
	.page {
		padding-top: 20px;
	}

	.formview {
		/* width: 40%; */
	}
</style>